<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <el-dropdown>
                    <el-button type="primary" size="small">
                        可选择题型
                        <el-icon class="el-icon--right">
                            <arrow-down/>
                        </el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item
                                    v-for="(item,index) in all_types"
                                    @click="find_scroll_top(index)">
                                {{item.type_name}}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </template>
        <div class="picker_box" v-if="subjects.length>0">
            <!--滚动条区域-->
            <div class="picker_ref" ref="picker_ref" :style="{'height': height+'px'}">
                <div class="type_group"
                     v-for="(item,i) in all_types"
                     :ref="el => { if (el) group_divs[i] = el }">
                    <div class="type_name">{{item.type_name}}</div>
                    <div class="pick_btn_flex">
                        <!--选择按钮-->
                        <div class="pick_btn_parent" :class="subjects[idx_in_list].flag ? 'is_flag':''" v-for="(idx_in_list,i) in groups[item.type_code]">
                            <el-button class="pick_btn" :type="computed_btn_type(idx_in_list,item.type_name)" circle
                                       @click="btn_picked(idx_in_list)">
                                <!--这里是适应业务 这里是适应业务startend-->
                                <span v-if="subjects[idx_in_list].parent_id">
                                    {{subjects[idx_in_list].parent_sort}}-{{subjects[idx_in_list].sort}}
                                </span>
                                <span v-else>
                                    {{subjects[idx_in_list].sort}}
                                </span>
<!--                                {{idx_in_list+1}}-->
                                <!--标记小蓝点-->
                                <!--                            <div class="dot" v-if="subjects[idx_in_list].flag"></div>-->
                            </el-button>
                        </div>
                        <i style="width:36px;height: 36px" class="pick_btn_parent" v-for="i in 5"></i>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
    <div class="pick_footer">
        <div class="pick_footer_button">
            <el-button type="primary" style="width: 10px;height: 10px" plain circle></el-button><span>已答</span>
        </div>
        <div v-if="pick_flag" class="pick_footer_button">
            <el-button type="success" style="width: 10px;height: 10px" plain circle></el-button><span>答对</span>
        </div>
        <div v-if="pick_flag" class="pick_footer_button">
            <el-button type="danger" style="width: 10px;height: 10px" plain circle></el-button><span>答错</span>
        </div>
        <div class="pick_footer_button">
            <el-button style="width: 10px;height: 10px" plain circle></el-button><span>未答</span>
        </div>
    </div>
</template>

<script>
    import source_to_subjects from "@/hock/public/source_to_subjects";
    import {throttle} from "../../utils/debounce/debounce";
    import {ref, toRefs,} from 'vue'
    import use_grouping from "@/components/Picker/composables/use_grouping";
    import use_btn_type from "@/components/Picker/composables/use_btn_type";
    import {ArrowDown} from '@element-plus/icons-vue'
    import * as api_module from "@/api/api";
    export default {
        name: "Picker",
        components: {ArrowDown},
        emits: ['update:index'],
        props: {
            //试题列表
            subjects: {
                type: Array,
                required: true
            },
            //picked是双向绑定的，组件选中的信息 数组格式[原始索引，group中的索引，题型名称]
            index: {
                type: Number,
                default: 0
            },
            //组件模式 可选[train,exam,analysis]
            mode: {
                type: String,
                default: 'train'// train,exam,analysis
            },
            //选择器滚动条区域的高度
            height: {
                type: [Number, String],
                default: 300
            },
            //图标显示/隐藏
            pick_flag:{
                type:Boolean,
                default:true
            }
        },
        setup(props, ctx) {
            const {subjects, index, height} = toRefs(props)
            const picker_ref = ref(null)//给这个dom添加滚动条
            const group_divs = ref([])//用于帮助寻找group的位置
            //groups是一个对象{type_code:[idx_in_list,... ],type_code2:[idx_in_list,... ]}
            //type_code对应的数组里面保存了subject_li中的原始索引
            const {groups, all_types} = use_grouping(subjects)
            const {computed_btn_type} = use_btn_type(props)//返回的是一个计算按钮type的函数
            const find_scroll_top = (index) => {
                picker_ref.value.scrollTop = group_divs.value[index].offsetTop - picker_ref.value.offsetTop
            }
            const btn_picked = (idx_in_list) => {
                ctx.emit('update:index', idx_in_list)
            }

            return {
                all_types,
                groups,
                group_divs,
                find_scroll_top,
                picker_ref,
                index,
                btn_picked,
                computed_btn_type,
                height
            }
        }
    }
</script>
<style>

</style>
<style scoped>
    .is_flag{
        border: 1px solid red !important;
    }
    .pick_footer{
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 10px 0px;
    }
    .pick_footer_button{
        display: flex;
        align-items: center;
        font-size: 13px;
    }
    .pick_footer_button span{
        margin-left: 5px;
    }
    .box-card {
        /*width: 350px;*/
    }

    .picker_box {
        /*background: azure;*/
        /*width: 300px;*/
        /*height:300px;*/
    }

    .picker_ref {
        /*height: 300px;*/
        overflow: auto;
        overflow-x: hidden;
        /*滚动条不挤压内容*/
        /*padding-right: 3px;*/
        /*overflow-y: overlay;*/

    }

    .picker_box ::-webkit-scrollbar {
        width: 3px;
        height: 0;
    }

    /*.picker_box:hover ::-webkit-scrollbar {*/
    /*    width: 3px;*/
    /*}*/

    .picker_box ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
    }

    .type_group {
        /*height: 150px;*/
        /*background-color: #42b983;*/
        /*margin-bottom: 20px;*/
        margin-bottom: 10px;
    }

    .type_name {
        color: #606266;
        font-size: 13px;
        /*font-weight: bold;*/
        margin-bottom: 15px;
    }

    .pick_btn_flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .pick_btn_parent{
        padding: 4px;
        background-color: #ffffff;
        margin-bottom: 8px;
        margin-right: 5px;
        border-radius: 50%;
        border: 1px solid #ffffff;
    }

    .pick_btn_flex .pick_btn {
        width: 36px;
        height: 36px;
        margin-left: 0;
        position: relative;
        font-size: 12px;
    }

    .pick_btn .dot {
        background-color: skyblue;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        position: absolute;
        bottom: 2px;
        right: 2px;
    }
</style>
